<template>
  <!-- 页面-角色管理-添加 -->
  <div class="sidelip-box authorized-user">
    <Tabs type="card" :animated="false">
      <TabPane :label="$t('module.role.designatedUser')">
        <div>
          <InnerPageTable ref="userTable" :config="tableConfigUser"></InnerPageTable>
        </div>
      </TabPane>
      <TabPane :label="$t('module.role.organization')">
        <div>
          <!-- <InnerPageTable ref="organizationTable" :config="tableConfigOrganization"></InnerPageTable> -->
          <Table :columns="organizationColumns()" :data="orgTableData"></Table>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import valueSetAPI from "@/api/valueSetAPI.js";
import roleAPI from "@/api/roleApi.js";
import locales from "./locales.js";
import { queryOrgsByOrgPaths } from "@/api/orgApi";
import userManageAPI from "@/api/userManageApi";
import { organizationColumns, generateColumns } from "./columns.js";
export default {
  name: "AuthorizedUser",
  mixins: [locales],
  components: {},
  props: {
    roleId: {
      type: String,
      default() {
        return "";
      }
    },
    tenantCode: {
      type: String,
      default() {
        return "";
      }
    },
    version: {
      type: String,
      default() {
        return "";
      }
    },
    rowList: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      searchForm: {
        roleId: "",
        tenantCode: ""
      },
      orgTableData: []
    };
  },
  computed: {
    tableConfigUser() {
      return {
        loadDataFn: this.queryUserList,
        columnsFn: generateColumns.bind(this),
        autoFirst: false
      };
    },
    organizationColumns() {
      return organizationColumns.bind(this);
    },
    tableConfigOrganization() {
      return {
        loadDataFn: this.queryOrgList,
        columnsFn: organizationColumns.bind(this),
        autoFirst: false,
        isPage: false
      };
    }
  },
  mounted: function () {
    this.init();
  },

  methods: {
    init() {
      this.$emit("SetTitle", this.$t("module.role.authorizedUsers"));
      this.$emit("SetPageWidth", 800);
      this.$emit("SetPageActions", [
        // {
        //   text: this.$t("common.close"),
        //   theme: "primary",
        //   handle: () => {
        //     this.$emit("Close");
        //   }
        // }
      ]);
      this.search(1);
      this.queryOrgList();
    },
    queryUserList: tableObj => {
      let { responseProcess, param } = tableObj;
      return roleAPI.getListUsersByRoleId(param).then(data => {
        let orgPaths = data.records.map(user => {
          return user.orgPath;
        });
        if (orgPaths.length > 0) {
          queryOrgsByOrgPaths(orgPaths).then(orgs => {
            data.records.forEach(user => {
              let userOrg = orgs.find(org => {
                return org.orgPath == user.orgPath;
              });
              user._hasOrgInfo = true;
              if (userOrg) {
                user.orgName = userOrg.orgName;
                user.orgNameFullPath = userOrg.orgNameFullPath;
              } else {
                user.orgName = user.orgPath;
                user.orgNameFullPath = user.orgPath;
              }
            });
            tableObj.tableData = data.records;
          });
        }
        responseProcess(data);
      });
    },
    // queryUserList({ responseProcess, param }) {
    //   roleAPI.getListUsersByRoleId(param).then(data => {
    //     let orgPaths = data.records.map(user => {
    //       return user.orgPath;
    //     });
    //     if (orgPaths.length > 0) {
    //       queryOrgsByOrgPaths(orgPaths).then(orgs => {
    //         data.records.forEach(user => {
    //           let userOrg = orgs.find(org => {
    //             return org.orgPath == user.orgPath;
    //           });
    //           user._hasOrgInfo = true;
    //           if (userOrg) {
    //             user.orgName = userOrg.orgName;
    //             user.orgNameFullPath = userOrg.orgNameFullPath;
    //           } else {
    //             user.orgName = user.orgPath;
    //             user.orgNameFullPath = user.orgPath;
    //           }
    //         });
    //         tableObj.tableData = data.records;
    //       });
    //     }
    //     responseProcess(data);
    //   });
    // },
    queryOrgList() {
      roleAPI.getListOrgByRoleId({ roleId: this.roleId }).then(data => {
        this.orgTableData = data;
      });
    },
    search(page) {
      const param = {
        roleId: this.roleId,
        tenantCode: this.tenantCode
      };
      this.$refs["userTable"].load(param, page);
    }
  }
};
</script>
<style lang="less">
.ivu-tabs-nav {
  .ivu-tabs-tab-active {
    color: #ff6f4b !important;
  }
  .ivu-tabs-tab-active:hover {
    color: #ff6f4b;
  }
  .ivu-tabs-tab:hover {
    color: #ff6f4b;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding-right: 8px;
}
.authorized-user {
  .ivu-spin {
    text-align: left;
  }
  .spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
}
</style>
